<template>
  <div class="create-playlist" v-if="playlists.length > 0">
    <home-nav :title="myselfOrOther ? '我的创建歌单' : profile?.nickname + '创建的歌单'" :more="false" />
    <!-- 通过userId来判断是自己创建的歌单还是收藏的歌单 -->
    <song-list-layout
        :playlists="playlists"
        @jumpPlayListDetails="jumpPlayListDetails"
        @play="play"
    />
    <div v-if="!myselfOrOther" class="mt-2">
      <van-pagination
          v-if="profile?.playlistCount > 21"
          v-model="paginationPage"
          :total-items="profile?.playlistCount"
          :show-page-size="5"
          :items-per-page="21"
          force-ellipses
          @change="pageChange"
      />
    </div>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router"
import {useStore} from "@/store/index"
import SongListLayout from '@/components/SongListLayout/index.vue'
import {reactive, toRefs} from "vue"
// 组件
import HomeNav from '@/components/HomeNav/index.vue'

const data = reactive({
  playlists: [], // 用户创建的歌单数据
  paginationPage: 1 // 当前页码
})
const router = useRouter()

const { playlists, paginationPage } = toRefs(data)
const route = useRoute()
const store = useStore()

// 获取创建的歌单
const getCreatePlaylist = (num = 0) => {
  store.getUserPlaylist({ uid: route.query.id, num }).then(playlists => {
    data.playlists = playlists
    // console.log(playlists)
  })
}
// 获取创建的歌单
getCreatePlaylist()

defineProps({
  myselfOrOther: Boolean,
  profile: Object
})
// 获取分页数据
const pageChange = (value) => {
  let num = value - 1
  getCreatePlaylist(num)
}

// 跳转到详情
const jumpPlayListDetails = (id) => {
  router.push({
    path: '/play-list-detail',
    query: {
      id
    }
  })
}
// 播放当前歌单
const play = (id) => {
  // 获取数据歌单数据
  store.getPlaylistDetail(id)
}
</script>

<style scoped lang="scss">
:deep(.van-pagination) {
  .van-pagination__item--active {
    background-color: #ff9292 !important;
    color: white !important;
  }
  .van-pagination__item--page, .van-pagination__item--next, .van-pagination__item--prev {
    color: #ff9292;
  }
}
</style>
